<template>
    <div>
      <div>
        <el-table ref="multipleTableRef" :data="tabledata" style="width: 100%" >
            <el-table-column type="selection" width="55" />
            <el-table-column property="name" label="医生姓名" width="120" />
            <el-table-column property="" label="挂号科室" width="120" >内科-心脏内室</el-table-column>
            <el-table-column label="2023/7/10 星期一">
              <el-table-column property="jzid" label="上午" width="120" >10/20</el-table-column>
              <el-table-column property="sfzid" label="下午" disabled width="120" >休</el-table-column>
            </el-table-column>
            <el-table-column label="2023/7/11 星期二">
              <el-table-column property="jzid" label="上午" width="120" >10/20</el-table-column>
              <el-table-column property="sfzid" label="下午" disabled width="120" >休</el-table-column>
            </el-table-column>
            <el-table-column label="2023/7/12 星期四">
              <el-table-column property="jzid" label="上午" width="120" >10/20</el-table-column>
              <el-table-column property="sfzid" label="下午" disabled width="120" >休</el-table-column>
            </el-table-column>
            <el-table-column label="2023/7/13 星期五">
              <el-table-column property="jzid" label="上午" width="120" >10/20</el-table-column>
              <el-table-column property="sfzid" label="下午" disabled width="120" >休</el-table-column>
            </el-table-column>
            <el-table-column label="2023/7/14 星期六">
              <el-table-column property="jzid" label="上午" width="120" >不上班</el-table-column>
              <el-table-column property="sfzid" label="下午" disabled width="120" >不上班</el-table-column>
            </el-table-column>
            <el-table-column property="cz" label="操作" width="120" >
              <template #default="scope">
          <el-icon >
            <Edit />
          </el-icon>&nbsp;&nbsp;
          <el-icon >
            <Delete />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>
  </div>
  
  <div class="demo-pagination-block">
    <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :small="small"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'
import type {IRegisterUser} from '@/typings/RegisterUser'
interface Iprops{
  tabledata:IRegisterUser[]
  total:number
  pageSize:number
  loadData:(currentPage:number,pageSize:number,formdata?:Record<string, string>)=> void
  currentPage:number
}
const props = defineProps<Iprops>()
const small = ref(false)
const background = ref(false)

const handleSizeChange = (val: number) => {
  props.loadData(props.currentPage,val)
}

const handleCurrentChange = (page: number) => {
  props.loadData(page,props.pageSize)
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<IRegisterUser[]>([])

</script>

<style scoped>
.demo-pagination-block{
    float:right;
    margin-top: 10px;
}
/* .demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
} */

</style>